<template lang='pug'>
.wp-inner
  nav 
    router-link(:to="{name:'myaddress'}",exact,replace) 我的收货地址
    router-link(:to="{name:'nearby'}",exact,replace) 附近可配送地址
  .ad-content
    transition(name="myfade")
      router-view
</template>
<script>
export default {
  data() {
    return {
      selected: 0,
    }
  },
  methods: {

  }
}
</script>
<style lang='scss' scoped>
@import './tool.scss';
@function _($px) {
  $rem: $px/50;
  @return #{$rem}rem;
}

.myfade-enter-active,
.myfade-leave-active {
  transition: opacity .5s;
}

.myfade-leave,
.myfade-leave-active {
  display: none;
}

.myfade-enter,
.myfade-leave-active {
  opacity: 0;
}
.wp-inner {
  background: #f2f2f2;
}
nav {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  text-align: center;
  padding: _(10) 0;
  z-index: 10000;
  box-shadow:0px 4px 16px 0px rgba(0,0,0,0.10);
  a {
    width: _(359);
    height: _(68);
    line-height: _(68);
    display: inline-block;
    border-radius: _(8) 0 0 _(8);
    border: 1px solid #ff782d;
    font-size: _(28);
    color: #ff782d;
    &.router-link-active {
      background-color: #ff782d;
      color: #fff;
    }
    &:last-child {
      border-radius: 0 _(8) _(8) 0;
    }
  }
}

.ad-content {
  margin-top: _(104);
}
</style>